「欸欸那個你，來這邊設計都出好圖了，照著圖切就好了」
「照著圖切就好嗎？」
「對！切得跟圖一樣就好啦，很簡單吧」
「喔喔喔，好的！沒問題，包在我身上」

。。。

你確定真的沒問題嗎... 你是不是不知道你答應了什麼..
你會這麼爽快答應，一定是沒被發過這樣的BUG

好了，現在知道不要隨便答應別人會跟圖稿一模一樣了吧～
所以切版並不是照著設計圖切就好了，那設計與切版之間有什麼要注意的呢？

STEP1. 先確認設計師給你哪些東西

I. 設計圖稿

以我自己看過最完整的網頁出圖通常會包含以下：

1. Guideline

   • 全站統一樣式
   • 可能包含全站顏色、字級、字型等等
   • 常見，但不一定有

   可以幫助切版什麼？

   強制定義規則：
   因為設計師往往一次要出多張圖、或是有多個人再一起進行設計，
   因此在出個頁面的時候難免會有一些不一致的地方，
   你可能會遇到一個網站有10種看起來都很像的紅色的色碼，這時候該怎麼辦？哪種才是對的？
   不管他照著各頁面直接貼嗎？如果都不改當然沒問題，
   但假設之後你收到一個需求是，全站主色紅色要改為藍色，那你就有的改了...
   所以，Guidline的好處是幫助設計師強制定義規則，讓切版有固定的規則可以依循，
   在後續的維護上也會比較容易喔！

2. 結構頁

   • 全站主要結構的種類
   • Eg.主頁面、有側邊欄的內頁、沒有側邊欄的內頁..
   • 不常見，也不一定會有

   可以幫助切版什麼？

   快速定義Layout架構，也規範設計師在相同的架構下進行設計

3. 元件頁

   • 設計師將所有版型歸納分類
   • Eg. 頁籤(TAB)、輪播(Slider)、頁碼...
   • 不常見，通常大型的案子才會出

   可以幫助切版什麼？

   可以更容易區分元件的分類，讓切版可以快速建立自己的元件庫
   有了元件庫，在製作版型時可以達到Reuse的效果，加速切版速度喔

4. 所有頁面圖檔

   • 所有頁面長得樣子，根據頁面一頁頁出圖
   • EG. 最新消息頁面、常見問題頁面、首頁...
   • 常見，一定有 （廢話，不然怎麼切？？）

   可以幫助切版什麼？

   這個一定要啦，不然怎麼切ＸＤ

II. 網頁用圖

1. ICON

icon幾乎是每個網頁裡都會出現的，也需要注意一些問題

• 建議使用SVG格式，向量圖檔不會因為放大縮小而產生模糊的狀況
• 同類的icon寬高應該一樣
  以選單為例，的每個欄位前都icon，則設計師應該出給你一樣大小的icon，
  否則會造成切完版歪來歪去的問題（這不應該是切版根據各個狀況調整）

2. 其他圖片

• 其他網頁的用圖基本上應該不會有太大的問題
• 滿版圖可能要注意一下，可以確認一下頁面大小最寬要支援到多少（eg. 1920px)
  那麼就建議出到這個大小，否則會變模糊喔

設計圖稿並不一定是每個專案都要出好出滿，像是活動頁，就只有一頁幹麻要結構頁？
所以也是要依據不同類型的專案來決定，不要沒事去嗆設計師說你為什麼只出這樣喔ＸＤ

好了，第一步，拿到東西了，
明天我們再繼續討論還有什麼其他要注意吧